<template>
	<view class="content">
		<image src="/static/bg.png" mode="" class="box-bg"></image>

		<view class="card">
			<view class="_title_">
				问题描述
			</view>
			<view class="textarea-box">
				<u--textarea v-model="content" placeholder="请输入内容" count maxlength="500" height="320rpx"></u--textarea>
			</view>

			<view class="_title_" style="margin-bottom: 32rpx;">
				相关照片
			</view>
			<u-upload :fileList="attachments" @afterRead="afterRead" @delete="deletePic" name="attachments"
				multiple :maxCount="8" accept="image"></u-upload>
				
				<view class="btn" @click="submitFeedbacks">
					提交反馈
				</view>
		</view>
		
		<Loading/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				attachments:[]
			}
		},
		methods: {
			
			submitFeedbacks(){
				
				let data={
					content:this.content,
					attachments:[]
				}
				this.attachments.forEach(item=>{
					data.attachments.push(item.attachment)
				})
			 	 
				this.$myRequest('/api/feedbacks',data,'POST')		
			},
			// 删除图片
			deletePic(event) {
				this[`${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`${event.name}`].length
				lists.map((item) => {
					this[`${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`${event.name}`][fileListLen]
					this[`${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						attachment: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url, name) {
				let that = this
				return this.$uploadFiles({
					filePath: url
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f5f5f5;
		// min-height: 100vh;	
		padding: 0 20rpx;
		padding-top: 172rpx;
		min-height: calc(100vh - 172rpx);
	}

	.card {
		padding: 20rpx;
		min-height: calc(100vh - 212rpx);

		.textarea-box {
			margin: 24rpx 0 34rpx 0;
		}
		.btn{
			width: 326rpx;
			height: 82rpx;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 82rpx;
			text-align: center;
			background-color: #456FFE;
			border-radius: 82rpx;
			margin: 0 auto;
			margin-top: 200rpx;
		}
	}
</style>
